<template>
    <div class="content">
        <div class="top">
            <div class="appname">
                <img src="@/assets/images/me/app_name.png" alt="">
            </div>
            <div class="explain">与明白人一起学习成长</div>
        </div>
        <div class="button" @click="wxLogin">
            <span class="weixin-svg"><icon name="weixin" :scale="3.5"></icon></span>
            微信登录
        </div>
        <div class="login">
            <div class="ctx">
                <div class='mobilLogin' @click='mobilLogin'>手机登录</div>
                <span class="demarcation"></span>
                <div class="mobilregister" @click='mobilRegist'>手机注册</div>
            </div>
        </div>
    </div>
</template> 
<script>
import {wechatLogin} from '@/utils/api'
import axios from 'axios'
import { Toast } from 'mint-ui';

export default {
    mounted() {
        // console.log('微信注册')
    },
    methods: {
        mobilLogin() {
            // console.log(this.$router.currentRoute.query.from,'登录')
            if(this.$router.currentRoute.query.from == 'gotoopen') {
                this.$router.push({path: '/mobillogin',query:{from:'gotoopen'}})
            } else if(this.$router.currentRoute.query.from == 'detail'){
                const id = this.$router.currentRoute.query.id
                this.$router.push({path: '/mobillogin',query:{from:'detail', id}})                
            } else {
                this.$router.push({path: '/mobillogin'})                
            }
        },
        mobilRegist() {
            // console.log('注册')
            this.$router.push({path: '/register'})
        },
        wxLogin() {
            // const token = localStorage.openid
            const unionId = localStorage.unionid
            wechatLogin({data: { unionId }}).then( res => {
                if (res.data.code === '0') {
                    sessionStorage.userInfo = JSON.stringify(res.data.result)
                    this.$router.push({path:'/listenBook', query: {uid: res.data.result.id}})
                }else if(res.data.code ==='-1') {
                    this.$router.push('/bindPhone')
                } else {
                    Toast(res.data.message)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.top{
    height: 5.84rem;
    overflow: hidden;
}
.weixin-svg {
    position: relative;
    top: 9px;
    margin-right: 5px;
}
.appname{
    width:1.92rem;
    height: 0.92rem;
    margin: 2.12rem auto 0.5rem;
    img{
        width:1.92rem;
        height: 0.92rem;
    }
}
.explain{
   font-size: 0.32rem; 
   color: #505050;
   height: 0.32rem;
   line-height: 0.32rem;
   text-align: center;
   font-family: PingFang-SC-Medium;
}
.button{
    width: 100%;
    height: 1.02rem;
    background: #e71f19;
    font-family: PingFang-SC-Bold;
    color: #fff;
    font-size: 0.4rem;
    line-height: 1.02rem;
    text-align: center;
    font-family: PingFang-SC-Bold;
    border-radius: 0.07rem;
}
.login{
    margin-top: 0.7rem;
    display: flex;
    justify-content: center;    
    .ctx{
        display: flex;
        justify-content: center;
        .mobilLogin{
            color: #505050;
            font-size: 0.3rem;
            line-height: 0.3rem;
        }
        .demarcation{
            display: block;
            width: 0px;
            height: 0.3rem;
            border-left: 1px solid #505050;
            margin-left: 0.3rem;
        }
        .mobilregister{
            float: left;
            color: #505050;
            font-size: 0.3rem;
            line-height: 0.3rem;
            margin-left: 0.3rem;
        }
    }
}
</style>
